<template>
  <a-form ref="attrFormRef" :model="attrModel" layout="vertical">
    <div v-for="(attr, index) in attrs" :key="index" class="flex flex-row items-center">
      <a-form-item
        class="mr-7 flex-1"
        :name="'customLabel' + index"
        label="属性名称"
        :rules="[
          {
            message: '请输入自定义属性名称',
            required: true,
          },
          {
            message: '最多可输入32个字符',
            max: 32,
          },
        ]"
      >
        <a-input v-model:value="attrModel['customLabel' + index]" @change="inputChange('customLabel', index)" />
      </a-form-item>
      <a-form-item
        class="mr-7 flex-1"
        label="属性内容"
        :name="'customValue' + index"
        :rules="[
          {
            message: '请输入自定义属性内容',
            required: true,
          },
          {
            message: '最多可输入32个字符',
            max: 32,
          },
        ]"
      >
        <a-input v-model:value="attrModel['customValue' + index]" @change="inputChange('customValue', index)" />
      </a-form-item>
      <div class="cursor-pointer" @click="remove(index)">
        <Icon type="icon-shanchu" class="text-2xl !text-color-danger" />
      </div>
    </div>
    <a-form-item class="mb-0">
      <a-button type="link" class="!p-0" :disabled="attrs.length >= 10" @click="add">
        <template #icon>
          <Icon type="icon-tianjia" />
        </template>
        添加自定义属性
      </a-button>
    </a-form-item>
  </a-form>
</template>
<script setup lang="ts">
import { ref, watch, reactive, nextTick } from "vue";
import { CustomAttributesItem } from "../api/aiot/projectManage/models";

const props = defineProps<{
  value?: string;
}>();
const emits = defineEmits(["change"]);

const attrs = ref<CustomAttributesItem[]>([]);
const attrFormRef = ref<any>();

const attrModel = ref<Record<string, string>>({});
function remove(index) {
  attrs.value.splice(index, 1);
  delete attrModel.value["customLabel" + index];
  delete attrModel.value["customValue" + index];
}
function add() {
  attrs.value.push({
    customLabel: "",
    customValue: "",
  });
  const index = attrs.value.length - 1;
  attrModel.value["customLabel" + index] = "";
  attrModel.value["customValue" + index] = "";
}
function inputChange(key: string, index: number) {
  const item = attrs.value[index];
  item[key] = attrModel.value[key + index];
  triggerValueWatch = false;
  emits("change", JSON.stringify(attrs.value));
  nextTick(() => {
    triggerValueWatch = true;
  });
}

let triggerValueWatch = true;
watch(
  () => props.value,
  (v) => {
    if (!triggerValueWatch) return;
    if (!v) {
      attrModel.value = {};
      attrs.value = [];
      return;
    }
    let data: CustomAttributesItem[] | null = null;
    try {
      data = JSON.parse(v) as CustomAttributesItem[];
    } catch (err) {}
    if (data) {
      attrModel.value = {};
      data.forEach((item, i) => {
        attrModel.value["customLabel" + i] = item.customLabel as string;
        attrModel.value["customValue" + i] = item.customValue as string;
      });
      attrs.value = data;
    }
  },
  {
    immediate: true,
  }
);

defineExpose({
  validate() {
    return attrFormRef.value.validate();
  },
  clear() {
    attrModel.value = {};
    attrs.value = [];
  },
});
</script>
